<template>
  <view>
    <view class="selector">
      <view class="showtitle" @click="show = !show">
        <span v-if="show">显示</span>
        <span v-else>隐藏</span>
      </view>
      <view class="selectproject">
        <project-selectors @click="selectProject" />
      </view>
    </view>
    <view class="content">
      <scroll-view
        :scroll-y="true"
        class="content-lefthead"
        :style="{ width: show ? '0%' : '26%' }"
      >
        <leftheader @selectheader="selectheader" />
      </scroll-view>
      <scroll-view
        :scroll-y="true"
        class="content-items"
        :style="{ width: show ? '100%' : '74%' }"
      >
        <items
          :title="title"
          :projectId="projectId"
          :categoryId="categoryId"
          :userId="userId"
          :onshowNumber="onshowNumber"
          :subtitle="subtitle"
        />
      </scroll-view>
    </view>
  </view>
</template>

<script>

import leftheader from "../../components/common/leftheader.vue";
import items from "../../components/common/items.vue";
import { mapActions } from "vuex";
export default {
  components: {
    leftheader,/*  */
    items,
  },
  data() {
    return {
      projectId: "",
      categoryId: 1,
      userId: "",
      title: "临时用电作业",
      show: false,
      onshowNumber: 0,
      subtitle: "临时用电作业",
    };
  },
  created() {
    this.getuserinfo();
  },
  onShow() {
    this.onshowNumber += 1;
  },
  methods: {
    // ...mapActions({ userInfo: "user/getInfo" }),
    async getuserinfo() {
      // const userInfo = await this.userInfo();
      // this.userId = userInfo.userId;
	  this.userId = '001'
    },
    selectProject(project) {
      if (project) {
        this.projectId = project.id;
      } else {
        this.projectId = "";
      }
    },
    selectheader(item) {
      this.categoryId = item.value;
      this.title = item.title;
      this.subtitle = item.subtitle;
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 81vh;
  display: flex;
  margin-top: 20rpx;
  background: #efefef;
  box-sizing: border-box;
  &-lefthead {
    width: 26%;
    height: 81vh;
    overflow-y: auto;
    background: #fff;
    transition: all 0.2s;
  }
  &-items {
    width: 74%;
    height: 81vh;
    overflow-y: auto;
    transition: all 0.2s;
  }
}
.selector {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .showtitle {
    width: 26%;
    height: 40px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .selectproject {
    width: 74%;
  }
}
</style>
<style>
scroll-view ::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}
</style>